import React, { useEffect, useRef, useState } from 'react';
import { Modal, Input } from 'antd';
import "./index.less";
import menu_search from "@/assets/images/menu_search.png";
import { getNowFormatDate } from "@/utils/time"
import TimeWord from "./components/TimeWord/time-word"

type IntriProps = {
  onChangeIsShow: (childData: any) => void;
  isShow: boolean,
};
const App: React.FC<IntriProps> = ({ onChangeIsShow, isShow }) => {
  const clockList = () => {
    return [
      { time: `${getNowFormatDate('hh')}:${getNowFormatDate('mm')}`, name: "北京", type: 1 },
      { time: `${getNowFormatDate('hh')}:${getNowFormatDate('mm')}`, name: "洛杉矶", type: 2 },
      { time: `${getNowFormatDate('hh')}:${getNowFormatDate('mm')}`, name: "纽约", type: 1 },
      { time: `${getNowFormatDate('hh')}:${getNowFormatDate('mm')}`, name: "巴黎", type: 1 },
      { time: `${getNowFormatDate('hh')}:${getNowFormatDate('mm')}`, name: "伦敦", type: 1 },
      { time: `${getNowFormatDate('hh')}:${getNowFormatDate('mm')}`, name: "基辅", type: 1 },
      { time: `${getNowFormatDate('hh')}:${getNowFormatDate('mm')}`, name: "东京", type: 1 },
      { time: `${getNowFormatDate('hh')}:${getNowFormatDate('mm')}`, name: "加拿大湖", type: 1 },
      { time: `${getNowFormatDate('hh')}:${getNowFormatDate('mm')}`, name: "第比利斯", type: 1 },
      { time: `${getNowFormatDate('hh')}:${getNowFormatDate('mm')}`, name: "奥勒姆", type: 1 },
    ]
  }

  const sList = () => {
    const splitNum = isFor ? 6 : 4
    return clockList().filter((_item, index) => index < splitNum)
  }

  const clockTop = useRef(null);
  const [isTow, setIsTow] = useState(true)
  const [isFor, setIsFor] = useState<boolean>(false)
  const [timeColor, setTimeColor] = useState<string>('')
  const [clockData, setClockData] = useState<any[]>(clockList())
  const [selectData, setSelectData] = useState<any[]>(sList())

  const colorList = [
    { bg: "#63B0FF" },
    { bg: "#4EC1E8" },
    { bg: "#7AD3A3" },
    { bg: "#FFCF53" },
    { bg: "#FFA2C0" },
    { bg: "#FF6A55" },
    { bg: "#AC92ED" },
    { bg: "#04071E" },
    { bg: "#ffffff" },
  ]

  const Suffix = () => {
    return (
      <div className="suffix">
        ｜<img src={menu_search} alt="" />
      </div>
    );
  };

  const sizeClick = (str: string) => {
    setIsTow(false)
    setIsFor(false)

    if (str === "tow") {
      setIsTow(true)
    }

    if (str === "for") {
      setIsFor(true)
    }
  }

  const setColor = (bg: string) => {
    setTimeColor(bg)
  }

  useEffect(() => {
    sizeClick('tow')
    const time = setInterval(() => {
      setClockData(clockList())
      setSelectData(clockList())

    }, 1000)

    return () => clearInterval(time)
  }, [isShow])

  return (
    <Modal keyboard={false} maskClosable={false} wrapClassName="world-clock" title="世界时钟" open={isShow} onOk={onChangeIsShow} onCancel={onChangeIsShow} centered={true} width="830px" footer={null}>
      <div className='world-clock-content'>
        <div className='clock-content-left'>
          <TimeWord color={timeColor} selectData={selectData} isFor={isFor} />
          <div className='content-left-split'>
            <div className={`split-item ${isTow && 'active'}`} onClick={() => sizeClick('tow')}></div>
            <div className={`split-item ${isFor && 'active'}`} onClick={() => sizeClick('for')}></div>
          </div>
        </div>
        <div className='clock-content-right'>
          <div ref={clockTop} className='content-left-top'>
            <div>选择时区</div>
            <div className='left-top-input'>
              <Input placeholder="功能模块名称" suffix={Suffix()} />
            </div>
          </div>
          <div className='content-left-bottom'>
            {clockData.map((item, index) => (
              <div
                key={index}
                className='content-left-bottom-card'
              >
                <div className={`card-button ${item.type === 1 ? 'blue' : 'red'}`}></div>
                <div className='bottom-card-text'>
                  <p>{item.time}</p>
                  <p>{item.name}</p>
                </div>
              </div>
            ))}
          </div>

          <div className='left-bottom-size'>
            <div className='size-name-text'>组件模板尺寸</div>
            <div className={`size-name-button ${isTow && 'active'}`} onClick={() => sizeClick('tow')}>2 x 2</div>
            <div className={`size-name-button ${isFor && 'active'}`} onClick={() => sizeClick('for')}>4 x 2</div>
          </div>

          <div className='left-bottom-color'>
            <div className='bottom-color-text'>组件颜色</div>
            <div className='bottom-color-main'>
              {colorList.map((item, index) => (
                <div key={index} className='color-card' style={{ background: item.bg }} onClick={() => setColor(item.bg)}></div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className='world-clock-footer'>
        <div className='footer-button btn1' onClick={() => onChangeIsShow(false)}>取消</div>
        <div className='footer-button btn2' onClick={() => setColor('')}>恢复默认</div>
        <div className='footer-button btn3'>确定</div>
      </div>
    </Modal>
  );
};

export default App;